<template>
  <div class="app-container">
    <audio></audio>

    <!--    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">-->
<!--      <el-form-item label="唯一id" prop="uid">-->
<!--        <el-input-->
<!--          v-model="queryParams.uid"-->
<!--          placeholder="请输入唯一id"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="单元" prop="unit">-->
<!--        <el-input-->
<!--          v-model="queryParams.unit"-->
<!--          placeholder="请输入单元"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="单词" prop="word">-->
<!--        <el-input-->
<!--          v-model="queryParams.word"-->
<!--          placeholder="请输入单词"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="词性" prop="cx">-->
<!--        <el-input-->
<!--          v-model="queryParams.cx"-->
<!--          placeholder="请输入词性"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="释义" prop="sy">-->
<!--        <el-input-->
<!--          v-model="queryParams.sy"-->
<!--          placeholder="请输入释义"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="复习次数" prop="goover">-->
<!--        <el-input-->
<!--          v-model="queryParams.goover"-->
<!--          placeholder="请输入复习次数"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="搜索值" prop="searchValue">-->
<!--        <el-input-->
<!--          v-model="queryParams.searchValue"-->
<!--          placeholder="请输入搜索值"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <el-row :gutter="10" class="mb8">
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['GooverGUI:GooverGUI:add']"-->
<!--        >新增</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['GooverGUI:GooverGUI:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['GooverGUI:GooverGUI:remove']"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-switch
          v-model="cjMode"
          active-color="#3CB371"
          active-text="双译模式"
          inactive-color="#ff4949"
          @change="cjCreateGooverList"
        >
        </el-switch>
      </el-col>
      <el-col :span="1.5">
        <el-switch
          style="display: block"
          v-model="engShow"
          active-color="#13ce66"
          inactive-color="#1E90FF"
          active-text="英译中"
          inactive-text="中译英"
          :disabled="cjMode"
          @change="CreateGooverList"
        >
        </el-switch>
      </el-col>
      <el-col :span="1.5">
        <el-switch
          v-model="dictation"
          active-color="#FF1493"
          active-text="听写模式"
          inactive-color="#708090"
          @change="dictationfun"
        >
        </el-switch>
      </el-col>

      <el-col :span="1.5">
        <el-checkbox v-model="checked">拼写验证</el-checkbox>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleUpdate">加载标签内容</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleUpdate2">加载卡片内容</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">
      </right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="GooverGUIList" @selection-change="handleSelectionChange" >
<!--      <el-table-column type="selection" width="55" align="center" />-->
<!--      <el-table-column label="唯一id" align="center" prop="uid" />-->
<!--      <el-table-column label="单元" align="center" prop="unit" />-->
      <el-table-column label="单词" align="center" prop="word">
        <template slot-scope="scope">
<!--          <i class="el-icon-headset" @click="getaudiofun(scope.row)"/>-->
          <el-input v-if="!engShow||cjMode"  :style="{'background-color': 'red'}" clearable autosize @focus="getaudiofun(scope.row,'dic')" @blur="verifyInput(scope.row.id,scope.row.word)" v-model="scope.row.word" placeholder="输入英文"></el-input>
            <span v-if="engShow&&!cjMode">{{scope.row.word}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="词性" align="center" prop="cx" />-->
      <el-table-column label="释义" align="center" prop="sy" >
        <template slot-scope="scope">
          <el-input v-if="engShow||cjMode" type="textarea" autosize clearable v-model="scope.row.sy" placeholder="输入释义"></el-input>
          <span v-if="!engShow&&!cjMode" >{{scope.row.sy}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="复习次数" align="center" prop="goover" />-->
<!--      <el-table-column label="备注" align="center" prop="remark" />-->
<!--      <el-table-column label="搜索值" align="center" prop="searchValue" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-star-off"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['GooverGUI:GooverGUI:edit']"-->
<!--          >标记</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="look(scope.row)"
            v-hasPermi="['GooverGUI:GooverGUI:edit']"
          >查看</el-button>
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['GooverGUI:GooverGUI:remove']"-->
<!--          >删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <el-button type="primary" @click="over">完成复习</el-button>

<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->

    <!-- 添加或修改GooverGUI对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标签" prop="searchValue">
          <el-select
            v-model="form.searchValue"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="标签库">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">加 载</el-button>
        <el-button type="danger" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改GooverGUI对话框 -->
    <el-dialog :title="title" :visible.sync="open2" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="卡片" prop="searchValue">
          <el-select
            v-model="form.searchValue"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="卡片库">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">加 载</el-button>
        <el-button type="danger" @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listGooverGUI,
  delGooverGUI,
  updateGooverGUI,
  querylabel,
  queryunit,
  submitover
} from "@/api/GooverGUI/GooverGUI";
import { GetLabel ,listEnglish} from "@/api/Goover/English";
import {listUnit} from "@/api/Unit/Unit";
import axios from "axios";

export default {
  name: "GooverGUI",
  data() {
    return {
      dictation:false,
      open2:false,
      option:[],
      options:[],
      options2:[],
      checked: true,
      backGooverGUIList: [], //备份
      ClearGooverGUIList: [], //清空
      cjMode: true,  //默认开启双译模式
      engShow: true,
      // 遮罩层
      loading: true
      ,
    // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // GooverGUI表格数据
      GooverGUIList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        uid: null,
        unit: null,
        word: null,
        cx: null,
        sy: null,
        goover: null,
        searchValue: null,
        createTime: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      audioParams:{
        type:2,
        audio:"statue"
      }
    };
  },
  created() {
    this.getList();
    this.getLabel();
    this.getUnit();
  },
  updated() {
    if(this.cjMode){
      this.GooverGUIList=this.ClearGooverGUIList;
    }
    // else{
    //   console.log("---")
    //   this.CreateGooverList();
    //   this.GooverGUIList=JSON.stringify(this.ClearGooverGUIList);
    // }
  }
  ,
  methods: {
    getaudiofun(row,v){
      if(v!=null&&(!this.dictation||row.word!=="")){
        return;
      }

      for(const val of this.backGooverGUIList){
        if(parseInt(val.id)==parseInt(row.id)){
          this.audioParams.audio=val.word;
          break;
        }
      }
      axios({
        method: "get",
        url: "/getaudio/dictvoice",
        params: this.audioParams,
        responseType: "blob"
      }).then(res => {
        console.log(res)
        let url = URL.createObjectURL(res.data);//通过这个API让语音数据转为成一个url地址
        let audio = new Audio();//在VUE中使用audio标签
        audio.src = url;//设置audio的src为上面生成的url
        audio.play();//进行播放
      })
    },
    look(val){
      console.log(val)
      for(const b of this.backGooverGUIList){
        if(val.id==b.id){
          val=b;
          break;
        }
      }
      this.$message({
        message:val.word+"  |  "+val.sy,
        type:"success"
      })
    },
    over(){
      submitover().then(res => {
        this.$message({
          message:"状态已记录，请继续努力",
          type:"success"
        })
      });
    },
    getUnit() {
      listUnit().then(response => {
        var y=new Array();
        for(var x of response.rows ){
          y.push({label:x.unit,value:x.uid});
        }
        this.options2=y.slice(0);
      });
    },
    tableRowClassName({row, rowIndex}){
      //这里判断是否要复习
      console.log(row);
      //首先判断 当前阶段是否已经过期 学习时间+复习阶段
      var jd=this.dateChange(row.planstage,row.plantime);
      console.log(jd)
      var date = new Date(jd)<new Date(); //具备复习条件
      if(date){
        return 'success-row';
      }
    },
    dateChange(num,date) {
      if (!date) {
        date = new Date();//没有传入值时,默认是当前日期
        date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      }
      date += " 00:00:00";//设置为当天凌晨12点
      date = Date.parse(new Date(date))/1000;//转换为时间戳
      date += (86400) * num;//修改后的时间戳
      var newDate = new Date(parseInt(date) * 1000);//转换为时间
      return newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate();
    },
  getLabel(){
    GetLabel().then(res => {
      var y=new Array();
      for(var x of res ){
        y.push({label:x.label,value:x.uid});
      }
      this.options=y;
    });
  },
    //验证输入是否正确
    verifyInput(id,val){
      if(this.checked&&val!=""){
        for(var v of this.backGooverGUIList){
          if(v.id==id){
            if(v.word!=val){
              this.$message.error("注意，"+val+"拼写错误");
            }else{
              v.goover=(v.goover+1);
              this.$message({
                message: '正确复习'+(v.goover)+'次',
                type: 'success'
              });
              console.log(v)
              updateGooverGUI(v).then();
            }
          }
        }
      }
    },
    dictationfun(val){
      if(val){
        this.$message({
          type:"success",
          message:"听写模式已开启"
        })
      }else{
        this.$message({
          type:"warning",
          message:"听写模式已关闭"
        })
      }

    }
    ,
    cjCreateGooverList(val){
      if(val){
        this.ClearGooverGUIList=JSON.parse(JSON.stringify(this.backGooverGUIList)); //深拷贝
        for(const x of this.ClearGooverGUIList){
          x.sy="";
          x.word="";
        }
        this.GooverGUIList=this.ClearGooverGUIList;
      }else{ //切换模式
        this.CreateGooverList(this.engShow);
        // this.ClearGooverGUIList=JSON.parse(JSON.stringify(this.backGooverGUIList)); //深拷贝
        // for(const x of this.ClearGooverGUIList){
        //   x.sy="";
        // }
        // this.GooverGUIList=this.ClearGooverGUIList;
      }
    },
    CreateGooverList(val){
      this.ClearGooverGUIList=JSON.parse(JSON.stringify(this.backGooverGUIList)); //深拷贝
      if(val){//切换模式
        for(const x of this.ClearGooverGUIList){
          x.sy="";
        }
        this.GooverGUIList=this.ClearGooverGUIList;
      }else{
        for(const x of this.ClearGooverGUIList){
          x.word="";
        }
        this.GooverGUIList=this.ClearGooverGUIList;
      }
    },
    handleCurrentChange(row, event, column) {
      console.log(row, event, column, event.currentTarget)
    },
    /** 查询GooverGUI列表 */
    getList(val) {
      this.loading = true;
      listGooverGUI(this.queryParams).then(response => {
        console.log(response)
        if(val!=null){response=val;}
        this.GooverGUIList = response.rows;
        this.backGooverGUIList = JSON.parse(JSON.stringify(response.rows));
        this.ClearGooverGUIList= JSON.parse(JSON.stringify(response.rows));
        //创造清空变量
        if(this.cjMode){
          for(const x of this.ClearGooverGUIList){
            x.sy="";
            x.word="";
          }
        }else{
          this.CreateGooverList(this.engShow);
        }
        //======
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancel2() {
      this.open2 = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        uid: null,
        unit: null,
        word: null,
        cx: null,
        sy: null,
        goover: null,
        remark: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        searchValue: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加GooverGUI";
    },
    /** 标记 */
    bj(row) {
      this.reset();
      this.open = true;
      this.title = "选择标签";
      // });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      // const id = row.id || this.ids
      // getGooverGUI(id).then(response => {
      //   this.form = response.data;
        this.open = true;
        this.title = "选择标签";
      // });
    },
  /** 修改按钮操作 */
  handleUpdate2(row) {
    this.reset();
    // const id = row.id || this.ids
    // getGooverGUI(id).then(response => {
    //   this.form = response.data;
    this.open2 = true;
    this.title = "选择卡片";
    // });
  },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateGooverGUI(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {

            var strlabel=this.form.searchValue;
            if(strlabel==null){
              this.$message.error("请选择标签后在加载");
              return;
            }
            querylabel(this.form.searchValue).then(response =>{
              console.log(response)
                this.$modal.msgSuccess("加载成功");
                this.open = false;
                this.getList(response);
            })
            // addGooverGUI(this.form).then(response => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          }
        }
      });
    },
    /** 提交按钮-----单元 */
    submitForm2() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateGooverGUI(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {

            var strlabel=this.form.searchValue;
            if(strlabel==null){
              this.$message.error("请选择卡片后在加载");
              return;
            }
            queryunit(this.form.searchValue).then(response =>{
              this.$modal.msgSuccess("加载成功");
              this.open2 = false;
              this.getList(response);
            })
            // addGooverGUI(this.form).then(response => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除GooverGUI编号为"' + ids + '"的数据项？').then(function() {
        return delGooverGUI(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('GooverGUI/GooverGUI/export', {
        ...this.queryParams
      }, `GooverGUI_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="css" scoped>
/*.el-input >>> .el-input__inner {*/
/*  color: red;*/
/*background-color: rgba(255, 255, 255, 0.247);*/
/*}*/

.colortext{
    color: red;
    background-color: rgba(255, 255, 255, 0.247);
}

</style>

